@import '~@/styles/variable.scss';

.container {
  width: 100%;
  height: 100%;
  .component-container {
    float: left;
    height: 100%;
    width: 20%;
    // background-color: #eee;
    box-shadow: 1px 1px 1px#999;
    .filter-container {
      width: 100%;
      height: 30%;
      // background-color: #f44336;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      align-items: center;
      box-shadow: 1px 1px 1px#999;
      .filter-item {
        width: 100%;
        /deep/ label {
          margin: 0.5rem;
        }
        // white-space: nowrap;
        // overflow: auto;
      }
    }
    .component-list-container {
      width: 100%;
      height: 70%;
      overflow: auto;
      .item-box {
        @include cur-p;
        margin: 1rem;
        box-shadow: 1px 1px 1px#999;
        .item-infos {
          width: 100%;
        }
        .component-item {
          margin: 0 auto;
          @include default-background-img;
        }
      }
    }
  }
  .edit-component-container {
    height: 100%;
    width: 80%;
    margin-left: 20%;
    // background-color: #eee;
    display: flex;
    flex-flow: column;
    .priview-container {
      width: 100%;
      min-height: 250px;
      box-shadow: 1px 1px 1px#999;
      // background-color: #2196f3;
      @include default-flex;
      .priview-item {
        max-width: 100%;
        margin: 0 auto;
        @include default-background-img;
      }
    }
    .edit-container {
      width: 100%;
      flex: 1;
      // background-color: #8bc34a;
      display: flex;
      flex-flow: column;
      .controller-bar {
        text-align: right;
        box-shadow: 1px 1px 1px#999;
        /deep/ .el-button {
          margin: 1rem 2rem;
          &:last-of-type {
            margin-right: 3rem;
          }
        }
      }
      .edit-form-container {
        width: 100%;
        height: 100%;
        flex: 1;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item-col {
          width: 50%;
          padding-left: 2rem;
          .form-box {
            width: 50%;
            @include default-flex;
            justify-content: flex-start;
            .tip {
              font-size: 1.5rem;
            }
            .title {
              @include ellipsis;
              text-align: center;
              padding-right: 1rem;
              width: 150px;
            }
          }
        }
      }
    }
  }
}
